<template>
  <div class="app-container">
    <el-tabs
      v-model="activeDepartment"
      type="card"
      class="demo-tabs"
      @tab-click="handleDepartmentClick"
    >
      <el-tab-pane
        v-for="(item, index) in activeDepartmentList"
        :label="item.deptName"
        :name="item.deptId"
      >
        <!--隐患排查情况-->
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>隐患排查情况</span>
                  <el-tabs
                    v-model="activeCheckTimeTab"
                    type="card"
                    class="demo-tabs"
                    @tab-click="handleCheckTimeClick"
                  >
                    <el-tab-pane label="当天" name="1"></el-tab-pane>
                    <el-tab-pane label="最近一周" name="2"></el-tab-pane>
                    <el-tab-pane label="最近一月" name="3"></el-tab-pane>
                  </el-tabs>
                </div>
              </template>
              <div class="body">
                <!--隐患排查情况---头部-->
                <el-row :gutter="12">
                  <el-col :xs="24" :sm="12" :md="12" :lg="5">
                    <div class="prevent-total check">
                      <img src="./../../../assets/prevent/total_icon.png" />
                      <span>应排查：</span>
                      <span>
                        {{
                          checkHeadData != undefined
                            ? checkHeadData.shouldCheckNumber
                            : "-"
                        }}
                      </span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="5">
                    <div shadow="hover" class="prevent-total check">
                      <img src="./../../../assets/prevent/total_icon.png" />
                      <span>已排查：</span>
                      <span>
                        {{
                          checkHeadData != undefined
                            ? checkHeadData.checkedOutNumber
                            : "-"
                        }}
                      </span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="5">
                    <div shadow="hover" class="prevent-total check">
                      <img src="./../../../assets/prevent/total_icon.png" />
                      <span>待排查：</span>
                      <span>
                        {{
                          checkHeadData != undefined ? checkHeadData.checkedNumber : "-"
                        }}
                      </span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="4">
                    <div shadow="hover" class="prevent-total check">
                      <img src="./../../../assets/prevent/total_icon.png" />
                      <span>超期未排查：</span>
                      <span>
                        {{
                          checkHeadData != undefined
                            ? checkHeadData.overdueUncheckedNumber
                            : "-"
                        }}
                      </span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="5">
                    <div shadow="hover" class="prevent-total check">
                      <img src="./../../../assets/prevent/total_icon.png" />
                      <span>排查完成率：</span>
                      <span>
                        {{
                          checkHeadData != undefined ? checkHeadData.finishingRate : "-"
                        }}
                      </span>
                    </div>
                  </el-col>
                </el-row>
                <!--隐患排查情况---列表-->
                <el-row :gutter="12" style="margin-top: 8px">
                  <el-tabs
                    v-model="activeCheck"
                    class="demo-tabs"
                    @tab-click="handleCheckOptionsClick"
                    style="width: 100%"
                  >
                    <el-tab-pane label="装置" name="1">
                      <el-table v-loading="loading" :data="checkBodyEquipData">
                        <el-table-column
                          label="所在装置"
                          prop="equipName"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column
                          label="应排查"
                          prop="shouldCheckNumber"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column label="已排查" prop="checkedOutNumber" />
                        <el-table-column
                          label="待排查"
                          prop="checkedNumber"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column
                          label="超期未排查"
                          prop="overdueUncheckedNumber"
                        />
                        <el-table-column label="排查完成率" prop="finishingRate" />
                      </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="部门" name="2">
                      <el-table v-loading="loading" :data="checkBodyDeptData">
                        <el-table-column
                          label="所在部门"
                          prop="deptName"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column
                          label="应排查"
                          prop="shouldCheckNumber"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column label="已排查" prop="checkedOutNumber" />
                        <el-table-column
                          label="待排查"
                          prop="checkedNumber"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column
                          label="超期未排查"
                          prop="overdueUncheckedNumber"
                        />
                        <el-table-column label="排查完成率" prop="finishingRate" />
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!--隐患治理情况-->
        <el-row :gutter="20" style="margin-top: 8px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>隐患治理情况</span>
                  <el-tabs
                    v-model="activeRectifyTimeTab"
                    type="card"
                    class="demo-tabs"
                    @tab-click="handleRectifyTimeClick"
                  >
                    <el-tab-pane label="当天" name="1"></el-tab-pane>
                    <el-tab-pane label="最近一周" name="2"></el-tab-pane>
                    <el-tab-pane label="最近一月" name="3"></el-tab-pane>
                  </el-tabs>
                </div>
              </template>
              <div class="body">
                <el-row :gutter="12">
                  <el-col :xs="24" :sm="12" :md="12" :lg="4">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>隐患总数：</span>
                      <span>{{
                        rectifyHeadData != undefined ? rectifyHeadData.hiddenNumber : "-"
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="4">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>已验收：</span>
                      <span>{{
                        rectifyHeadData != undefined
                          ? rectifyHeadData.hiddenAcceptNumber
                          : "-"
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="4">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>待验收：</span>
                      <span>{{
                        rectifyHeadData != undefined
                          ? rectifyHeadData.hiddenRectifyNumber
                          : "-"
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="4">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>整改中：</span>
                      <span>{{
                        rectifyHeadData != undefined
                          ? rectifyHeadData.hiddenAllotNumber
                          : "-"
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="4">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>超期未整改：</span>
                      <span>{{
                        rectifyHeadData != undefined
                          ? rectifyHeadData.hiddenExceedNumber
                          : "-"
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="4">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>隐患整改率：</span>
                      <span>{{
                        rectifyHeadData != undefined
                          ? rectifyHeadData.hiddenRectifyRate
                          : "-"
                      }}</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="12" style="margin-top: 8px">
                  <el-tabs
                    v-model="activeRectify"
                    class="demo-tabs"
                    @tab-click="handleRectifyOptionsClick"
                    style="width: 100%"
                  >
                    <el-tab-pane label="装置" name="1">
                      <el-table v-loading="loading" :data="rectifyBodyEquipData">
                        <el-table-column
                          label="所在装置"
                          prop="equipName"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column
                          label="隐患总数"
                          prop="hiddenNumber"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column label="新增" prop="hiddenRectifyNumber" />
                        <el-table-column
                          label="已验收"
                          prop="hiddenAcceptNumber"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column label="隐患整改率" prop="hiddenRectifyRate" />
                      </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="部门" name="2">
                      <el-table v-loading="loading" :data="rectifyBodyDeptData">
                        <el-table-column
                          label="所在部门"
                          prop="deptName"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column
                          label="隐患总数"
                          prop="hiddenNumber"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column label="新增" prop="hiddenRectifyNumber" />
                        <el-table-column
                          label="已验收"
                          prop="hiddenAcceptNumber"
                          :show-overflow-tooltip="true"
                        />
                        <el-table-column label="隐患整改率" prop="hiddenRectifyRate" />
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!--排查任务统计-->
        <el-row :gutter="20" style="margin-top: 8px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>排查任务统计</span>
                  <el-tabs
                    v-model="activeTaskTimeTab"
                    type="card"
                    class="demo-tabs"
                    @tab-click="handleTaskTimeClick"
                  >
                    <el-tab-pane label="当天" name="1"></el-tab-pane>
                    <el-tab-pane label="最近一周" name="2"></el-tab-pane>
                    <el-tab-pane label="最近一月" name="3"></el-tab-pane>
                  </el-tabs>
                </div>
              </template>
              <div class="body">
                <el-row :gutter="12" style="margin-top: 8px">
                  <el-table v-loading="loading" :data="taskDataList">
                    <el-table-column
                      label="所在装置"
                      prop="equipName"
                      :show-overflow-tooltip="true"
                    />
                    <el-table-column
                      label="主要负责人总任务数"
                      prop="principalTaskNumber"
                      :show-overflow-tooltip="true"
                    />
                    <el-table-column
                      label="主要负责人待排查数"
                      prop="principalPendingTaskNumber"
                    />
                    <el-table-column
                      label="主要负责人超期数"
                      prop="principalExceedTaskNumber"
                      :show-overflow-tooltip="true"
                    />
                    <el-table-column
                      label="技术负责人总任务数"
                      prop="technicalTaskNumber"
                      :show-overflow-tooltip="true"
                    />
                    <el-table-column
                      label="技术负责人待排查数"
                      prop="technicalPendingTaskNumber"
                    />
                    <el-table-column
                      label="技术负责人超期数"
                      prop="technicalExceedTaskNumber"
                      :show-overflow-tooltip="true"
                    />
                    <el-table-column
                      label="操作负责人总任务数"
                      prop="operatorTaskNumber"
                      :show-overflow-tooltip="true"
                    />
                    <el-table-column
                      label="操作负责人待排查数"
                      prop="operatorPendingTaskNumber"
                    />
                    <el-table-column
                      label="操作负责人超期数"
                      prop="operatorExceedTaskNumber"
                      :show-overflow-tooltip="true"
                    />
                  </el-table>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!--单位运行效果-->
        <el-row :gutter="20" style="margin-top: 8px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>单位运行效果</span>
                  <el-tabs
                    v-model="activeRunTimeTab"
                    type="card"
                    class="demo-tabs"
                    @tab-click="handleRunClick"
                  >
                    <el-tab-pane label="当天" name="1"></el-tab-pane>
                    <el-tab-pane label="最近一周" name="2"></el-tab-pane>
                    <el-tab-pane label="最近一月" name="3"></el-tab-pane>
                  </el-tabs>
                </div>
              </template>
              <div class="body">
                <el-row :gutter="12">
                  <el-col :xs="24" :sm="12" :md="12" :lg="6">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>优：</span>
                      <span>{{ excellent }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="6">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>良：</span>
                      <span>{{ good }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="6">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>中：</span>
                      <span>{{ middle }}</span>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12" :lg="6">
                    <div class="prevent-total hidden-prevent">
                      <img src="./../../../assets/prevent/hidden_icon.png" />
                      <span>差：</span>
                      <span>{{ short }}</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="12" style="margin-top: 8px">
                  <el-table v-loading="loading" :data="runDataList">
                    <el-table-column
                      label="部门名称"
                      prop="deptName"
                      :show-overflow-tooltip="true"
                    />
                    <el-table-column
                      label="上周排查任务完成率"
                      prop="taskRatio"
                      :show-overflow-tooltip="true"
                    />
                    <el-table-column label="上周隐患整改率" prop="governRatio" />
                    <el-table-column
                      label="运行值"
                      prop="runtimeValue"
                      :show-overflow-tooltip="true"
                    />
                    <el-table-column label="运行效果" prop="operationEffect">
                      <template #default="scope">
                        <div
                          v-if="scope.row.operationEffect == '优'"
                          class="effect-1"
                        ></div>
                        <div
                          v-if="scope.row.operationEffect == '良'"
                          class="effect-2"
                        ></div>
                        <div
                          v-if="scope.row.operationEffect == '中'"
                          class="effect-3"
                        ></div>
                        <div
                          v-if="scope.row.operationEffect == '差'"
                          class="effect-4"
                        ></div>
                        <span>{{ scope.row.operationEffect }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="PreventView">
import {
  getHiddenTotalData,
  getHiddenTotalDataByDept,
  getHiddenTotalDataByEquip,
  getRectifyTotalData,
  getRectifyTotalDataByDept,
  getRectifyTotalDataByEquip,
  getTaskTotalData,
  getRunEffect,
} from "@/api/prevent/dataview/index";
import { listStatisticsDept } from "@/api/system/dept";

/** 顶部切换 */
const activeDepartment = ref(0); //部门切换
/** 隐患排查情况 */
const activeCheckTimeTab = ref("1"); //隐患排查情况----时间切换
const checkHeadData = ref(); //隐患排查情况统计--头部数据统计
const activeCheck = ref("1"); //隐患排查情况统计--部门装置切换
const checkBodyDeptData = ref([]); //隐患排查情况统计--部门
const checkBodyEquipData = ref([]); //隐患排查情况统计--装置
/** 隐患治理情况 */
const activeRectifyTimeTab = ref("1"); //隐患治理时间切换
const activeRectify = ref("1");
const rectifyHeadData = ref(); //隐患治理情况统计--头部数据统计
const rectifyBodyDeptData = ref([]); //隐患治理情况统计--部门
const rectifyBodyEquipData = ref([]); //隐患治理情况统计--装置
/** 排查任务统计 */
const activeTaskTimeTab = ref("1"); //排查任务统计----时间切换
const taskDataList = ref([]); //排查任务统计----列表数据

/** 单位运行效果 */
const activeRunTimeTab = ref("1"); //单位运行效果----时间切换
const runDataList = ref([]); //单位运行效果----列表数据
const excellent = ref(0); //优秀
const good = ref(0); //良好
const middle = ref(0); //中
const short = ref(0); //差
const loading = ref(true);
const activeDepartmentList = ref([]);

/** 切换部门 */
function handleDepartmentClick(tab) {
  //console.log("切换顶部部门数据统计", tab.props.name);
  activeDepartment.value = tab.props.name;
  getHiddenHead();
  if (activeCheck.value == "1") {
    getHiddenEquip();
  } else {
    getHiddenDept();
  }
  getRectifyHead();
  if (activeRectify.value == "1") {
    getRectifyEquip();
  } else {
    getRectifyDept();
  }
  getTaskData();
  getRunDataList();
}

/**-----------------------隐患排查情况处理--------------------------- */
/** 处理隐患排查时间情况切换 */
const handleCheckTimeClick = (tab, event) => {
  //console.log("隐患排查时间切换", tab.props.name);
  activeCheckTimeTab.value = tab.props.name;
  getHiddenHead();
  if (activeCheck.value == "1") {
    getHiddenEquip();
  } else {
    getHiddenDept();
  }
};
/** 处理隐患排查情况---部门装置切换 */
const handleCheckOptionsClick = (tab, event) => {
  console.log(tab.props.name, tab.props.label);
  if (tab.props.name == "1") {
    getHiddenEquip();
  } else {
    getHiddenDept();
  }
};
/** 获取隐患排查情况统计--头部 */
function getHiddenHead() {
  getHiddenTotalData({
    deptId: parseInt(activeDepartment.value),
    typeId: activeCheckTimeTab.value,
  }).then((res) => {
    checkHeadData.value = res.data;
  });
}
/** 获取隐患排查情况统计--部门 */
function getHiddenDept() {
  loading.value = true;
  getHiddenTotalDataByDept({
    deptId: parseInt(activeDepartment.value),
    typeId: activeCheckTimeTab.value,
  }).then((res) => {
    checkBodyDeptData.value = res.data;
    loading.value = false;
  });
}

/** 获取隐患排查情况统计--装置 */
function getHiddenEquip() {
  loading.value = true;
  getHiddenTotalDataByEquip({
    deptId: parseInt(activeDepartment.value),
    typeId: activeCheckTimeTab.value,
  }).then((res) => {
    checkBodyEquipData.value = res.data;
    loading.value = false;
  });
}
/**-----------------------隐患治理情况情况处理--------------------------- */

/** 处理隐患治理时间切换 */
const handleRectifyTimeClick = (tab, event) => {
  activeRectifyTimeTab.value = tab.props.name;
  getRectifyHead();
  if (activeRectify.value == "1") {
    getRectifyEquip();
  } else {
    getRectifyDept();
  }
};

/** 处理隐患治理情况---部门装置切换 */
const handleRectifyOptionsClick = (tab, event) => {
  console.log(tab.props.name, tab.props.label);
  if (tab.props.name == "1") {
    getRectifyEquip();
  } else {
    getRectifyDept();
  }
};
/** 获取隐患治理情况统计--头部 */
function getRectifyHead() {
  getRectifyTotalData({
    deptId: parseInt(activeDepartment.value),
    typeId: activeRectifyTimeTab.value,
  }).then((res) => {
    rectifyHeadData.value = res.data;
  });
}
/** 获取隐患治理情况统计--部门 */
function getRectifyDept() {
  loading.value = true;
  getRectifyTotalDataByDept({
    deptId: parseInt(activeDepartment.value),
    typeId: activeRectifyTimeTab.value,
  }).then((res) => {
    rectifyBodyDeptData.value = res.data;
    loading.value = false;
  });
}

/** 获取隐患排查情况统计--装置 */
function getRectifyEquip() {
  loading.value = true;
  getRectifyTotalDataByEquip({
    deptId: parseInt(activeDepartment.value),
    typeId: activeRectifyTimeTab.value,
  }).then((res) => {
    rectifyBodyEquipData.value = res.data;
    loading.value = false;
  });
}

/**-----------------------排查任务统计处理--------------------------- */
/** 处理排查任务统计时间切换 */
const handleTaskTimeClick = (tab, event) => {
  activeTaskTimeTab.value = tab.props.name;
  getTaskData();
};

/** 获取排查任务统计数据 */
function getTaskData() {
  getTaskTotalData({
    deptId: parseInt(activeDepartment.value),
    typeId: activeTaskTimeTab.value,
  }).then((res) => {
    taskDataList.value = res.data;
  });
}

/**-----------------------单位运行效果处理--------------------------- */

/** 处理d单位运行效果时间切换 */
const handleRunClick = (tab, event) => {
  activeRunTimeTab.value = tab.props.name;
  getRunDataList();
};

/** 获取单位运行效果数据 */
function getRunDataList() {
  getRunEffect({
    deptId: parseInt(activeDepartment.value),
    typeId: activeRunTimeTab.value,
  }).then((res) => {
    runDataList.value = res.data;
    excellent.value = res.data.filter((item) => {
      return item.operationEffect == "优";
    }).length;
    good.value = res.data.filter((item) => {
      return item.operationEffect == "良";
    }).length;
    middle.value = res.data.filter((item) => {
      return item.operationEffect == "中";
    }).length;
    short.value = res.data.filter((item) => {
      return item.operationEffect == "差";
    }).length;
  });
}
/** 获取权限内的统计部门 */
function takeActiveDepartment() {
  listStatisticsDept().then((res) => {
    activeDepartmentList.value = res.data;
    if (activeDepartmentList.value.length > 0) {
      activeDepartment.value = res.data[0].deptId;
      console.log("active", activeDepartment.value);
      /**  初始化 简单请求，不全部处理 */
      getHiddenHead(); //获取隐患排查情况
      getHiddenEquip(); //获取隐患排查情况-装置
      getRectifyHead(); //获取隐患治理情况
      getRectifyEquip(); //获取隐患治理情况-装置
      getTaskData(); //获取排查任务统计
      getRunDataList(); //获取单位运行效果
    }
  });
}
takeActiveDepartment();
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.prevent-total {
  padding: 12px;

  font-size: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 80px;
}
.check {
  color: #fff;
  background: url("./../../../assets/prevent/total_bg.png") no-repeat;
  background-size: 100% 100%;
}
.hidden-prevent {
  color: #1989fa;
  background: url("./../../../assets/prevent/hidden_bg.png") no-repeat;
  background-size: 100% 100%;
}
.prevent-total:hover {
  font-size: 18px;
}
.prevent-total span {
  height: 80px;
  line-height: 80px;
}
.prevent-total span:last-child {
  font-size: 24px;
  font-weight: bold;
}
.prevent-total img {
  height: 48px;
  width: 48px;
}
:deep(.cell) {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.effect-1 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #6dd400;
  margin-right: 5px;
}
.effect-2 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #32c5ff;
  margin-right: 5px;
}
.effect-3 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f7b500;
  margin-right: 5px;
}
.effect-4 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fa0000;
  margin-right: 5px;
}
</style>
